const styles = require("./video.css");
import { $ } from "../../utils/utils";

interface Ivideo {
  url: string;
  elem: string | HTMLElement;
  width?: string;
  height?: string;
  autoplay?: boolean;
}

interface Iconponent {
  tempContainer: HTMLElement;
  init: () => void;
  template: () => void;
  handle: () => void;
}

function video(options: Ivideo) {
  return new Video(options);
}

class Video implements Iconponent {
  private settings;

  public tempContainer: HTMLElement;
  constructor(settings: Ivideo) {
    this.settings = Object.assign(
      {
        width: "100%",
        height: "100%",
        autoplay: false,
      },
      settings
    );
    this.init();
  }
  init() {
    this.template();
    this.handle();
  }
  template() {
    this.tempContainer = document.createElement("div");
    this.tempContainer.className = styles.default["video"];
    this.tempContainer.style.width = this.settings.width;
    this.tempContainer.style.height = this.settings.height;

    this.tempContainer.innerHTML = `
    <video class="${styles.default["video-content"]}" src="${this.settings.url}"></video>
    <div class="${styles.default["video-controls"]} clearfix">
      <div class="${styles.default["video-progress"]}"> 
        <div class="${styles.default["video-progress-now"]}"></div>
        <div class="${styles.default["video-progress-suc"]}"></div>
        <div class="${styles.default["video-progress-bar"]}"></div>
      </div>
      <div class="${styles.default["video-play"]}">
        <i class="iconfont icon-bofang"></i>
      </div>
      <div class="${styles.default["video-time"]}">
        <span>00:00</span> | <span>00:00</span>
      </div>
      <div class="${styles.default["video-full"]}">
        <i class="iconfont icon-quanping"></i>
      </div>
      <div class="${styles.default["video-volume"]}">
        <i class="iconfont icon-yinliang"></i>
        <div class="${styles.default["video-volprogress"]}"> 
          <div class="${styles.default["video-volprogress-now"]}"></div>
          <div class="${styles.default["video-volprogress-bar"]}"></div>
        </div>
      </div>
    </div>
    `;
    if (typeof this.settings.elem === "object") {
      this.settings.elem.appendChild(this.tempContainer);
    } else {
      document
        .querySelector(`${this.settings.elem}`)
        ?.appendChild(this.tempContainer);
    }
  }
  handle() {
    const videoContent: HTMLVideoElement = $(
      `.${styles.default["video-content"]}`
    );

    let videoControls: HTMLElement = this.tempContainer.querySelector(
      `.${styles.default["video-controls"]}`
    ) as HTMLElement;
    let videoPlay: HTMLElement = this.tempContainer.querySelector(
      `.${styles.default["video-controls"]} i`
    ) as HTMLElement;
    let videoTimes: NodeListOf<HTMLElement> =
      this.tempContainer.querySelectorAll(
        `.${styles.default["video-time"]} span`
      );
    let videoFull: HTMLElement = this.tempContainer.querySelector(
      `.${styles.default["video-full"]}`
    ) as HTMLElement;
    console.log(videoTimes);

    let videoBar: HTMLElement = this.tempContainer.querySelector(
      `.${styles.default["video-progress-bar"]}`
    ) as HTMLElement;

    let videoProgress: NodeListOf<HTMLElement> =
      this.tempContainer.querySelectorAll(
        `.${styles.default["video-progress"]} div`
      ) as NodeListOf<HTMLElement>;

    let timer;

    // 视频是否加载完毕
    videoContent.addEventListener("canplay", () => {
      console.log("canplay");
    });
    // 视频播放
    videoContent.addEventListener("play", () => {
      console.log("play");
      videoPlay.className = `iconfont icon-zanting`;
      (videoTimes[1] as HTMLElement).innerHTML = formatTime(
        videoContent.duration
      );

      timer = setInterval(() => playing(), 1000);
    });
    // 视频暂停
    videoContent.addEventListener("pause", () => {
      console.log("canplay");
      videoPlay!.className = `iconfont icon-bofang`;

      clearInterval(timer);
    });

    videoProgress[2].addEventListener("mousemove", (e: MouseEvent) => {
      let x = e.offsetX;
      let width = videoProgress[2].offsetWidth;
      let percent = x / width;
      videoContent.currentTime = percent * videoContent.duration;
      videoProgress[1].style.width = `${x}px`;
      videoProgress[0].style.width = `${x}px`;
    });

    // 播放/暂停
    videoPlay!.addEventListener("click", () => {
      if (videoContent.paused) {
        videoContent.play();
      } else {
        videoContent.pause();
      }
    });

    // 全屏
    videoFull.addEventListener("click", () => {
      videoContent.requestFullscreen();
    });

    // 正在播放中
    function playing() {
      console.log(videoContent.currentTime);

      (videoTimes[0] as HTMLElement).innerHTML = formatTime(
        videoContent.currentTime
      );

      videoProgress[0].style.width =
        (videoContent.currentTime / videoContent.duration) * 100 + "%";
      videoProgress[1].style.width =
        (videoContent.buffered.end(0) / videoContent.duration) * 100 + "%";
      videoBar.style.left =
        (videoContent.currentTime / videoContent.duration) * 100 + "%";
    }

    function formatTime(number: number): string {
      number = Math.round(number);
      let min = Math.floor(number / 60);
      let sec = number % 60;
      return setZero(min) + ":" + setSec(sec);
    }
    function setZero(number: number): string {
      if (number < 0) {
        return "00";
      } else {
        return "0" + number.toString();
      }
    }
    function setSec(number: number): string {
      if (number < 10 && number > 0) {
        return "0" + number.toString();
      } else {
        return number.toString();
      }
    }
  }
}

export default video;
